<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>MsgAlert - MadeByAmp</title>
	
<style type="text/css" media="screen">

	
* { padding: 0; margin: 0; }

body
{
	background: #DDD;
	font: 12px/1.7em arial, sans-serif;
	margin: 0 auto 75px;
}

button { padding: 4px 8px; }


</style>

<link rel="stylesheet" href="./example_files/style.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="./css/msgAlert.css" type="text/css" media="screen" title="no title" charset="utf-8" />


<script type="text/javascript" charset="utf-8" src="./js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./js/msgAlert.js"></script>
</head>

<body id="">
	
<div id="wrapper">
	
<h1>MsgAlert - MadeByAmp</h1>

<p>MsgAlert is a clean CSS3 notification system for alerting users to site information, errors, warnings, and successes.</p>
 
<div class="screenshot">
	<img src="./example_files/grab.png" />
</div>

<p>To get started with MsgAlert, add the msgAlert.css stylesheet to your document:</p>

<pre>
&lt;link rel="stylesheet" href="msgAlert.css" type="text/css" charset="utf-8" /&gt;
</pre>

<p>Also add the MsgAlert javascript file to your document:</p>

<pre>
&lt;script src="msgAlert.js"&gt;&lt;/script&gt;
</pre>
<br />
<p>Then add the images folder contained in this download to your project and make sure all the image paths in the msgAlert.css file are correct.</p>

<br />


<p style="background: #FFC;">For support email the author through his Code Canyon author page <a href="http://codecanyon.net/user/MadeByAmp">http://codecanyon.net/user/MadeByAmp</a></p>

	<br />
	<hr />
	
	<br /><br />
<h2>Example/Usage</h2>




<h3>Basic</h3>
	
<pre>
$.msgAlert ({
	text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
});
</pre>	

<button class="demo_basic">Basic</button>

<script>
$(function () {	
	$('.demo_basic').live ('click', function (e) {
		$.msgAlert ({
			text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.'
		});
	});	
});
</script>
	<br />
	<br />
	<hr />







<h3>Basic w/ Header</h3>
	
<pre>
$.msgAlert ({
	title: 'Title'
	, text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
});
</pre>	

<button class="demo_header">Basic w/ Header</button>

<script>
$(function () {	
	$('.demo_header').live ('click', function (e) {
		$.msgAlert ({
			title: 'Title'
			, text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.'
		});
	});	
});
</script>
	<br />
	<br />
	<hr />
	
	
	
	
	
	
	
	
<h3>Types</h3>
	
<pre>
$.msgAlert ({
	type: 'info'
	, title: 'Title'
	, text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
});
</pre>	

<button class="demo_type" rel="info">Info</button>
<button class="demo_type" rel="success">Success</button>
<button class="demo_type" rel="warning">Warning</button>
<button class="demo_type" rel="error">Error</button>

<script>
$(function () {	
	$('.demo_type').live ('click', function (e) {
		$.msgAlert ({
			type: $(this).attr ('rel')
			, title: 'Title'
			, text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.'
		});
	});	
});
</script>
	<br />
	<br />
	<hr />
	
	




<h3>Callback</h3>
	
<pre>
$.msgAlert ({
	type: 'error'
	, title: 'Title'
	, text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
	, callback: function () {
		alert ('Alert Callback');
	}
});
</pre>	

<button class="demo_callback">Callback</button>
<script>
$(function () {	
	$('.demo_callback').live ('click', function (e) {
		$.msgAlert ({
			type: 'error'
			, title: 'Title'
			, text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.'
			, callback: function () {
				alert ('Alert Callback');
			}
		});
	});	
});
</script>
	<br />
	<br />
	<hr />


	
	


	
	<br />
	<br />

<h2>Options</h2>

<table border="0">
    <tbody>
        <tr>
            <th width="130">Option Name</th>

            <th width="130">Default Value</th>

            <th>Explanation</th>
        </tr>

        <tr>
            <td>type</td>

            <td><em>empty string</em></td>

            <td>Designates the type of notication being displayed. Options are an <em>empty string, info, success, error, warning.</em></td>
        </tr>

        <tr>
            <td>title</td>

            <td><em>empty string</em></td>

            <td>Optional title which is displayed above the notification text.</td>
        </tr>

        <tr>
            <td>text</td>

            <td><em>empty string</em></td>

            <td>Required text message for notification.</td>
        </tr>

        <tr>
            <td>closeTrigger</td>

            <td><em>true</em></td>

            <td><em>True/false</em>. When set to true the notification will display a small x in the corner allowing the user to manually close the notification.</td>
        </tr>
        

        <tr>
            <td>escClose</td>

            <td><em>true</em></td>

            <td><em>True/false</em>. When set to true the notification will be closed when the user clicks the ESC key.</td>
        </tr>

        <tr>
            <td>overlay</td>

            <td><em>true</em></td>

            <td><em>True/false</em>. When set to true a the content of the page will be covered by a transparent div halting interaction until the alert is closed.</td>
        </tr>

        <tr>
            <td>overlayClose</td>

            <td><em>true</em></td>

            <td><em>True/false</em>. When set to true clicking on an active overlay will close the alert.</td>
        </tr>

        <tr>
            <td>callback</td>

            <td><em>function () {}</em></td>

            <td>Callback function to be executed when an affirmative button is clicked.</td>
        </tr>

    </tbody>
</table>
	
</div> <!-- #wrapper -->

</body>

</html>